<template>
  <div>
    <div id="container">
    </div>

  </div>
</template>

<script>
  import AMapLoader from '@amap/amap-jsapi-loader';

  AMapLoader.load({
    "key": "14b99f68d8e18231d15e8824ab39ad93",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    var map = new AMap.Map('container', {
      center: [117.699, 39.088],
      layers: [
        // 卫星
        new AMap.TileLayer.Satellite(),
        // 路网
        new AMap.TileLayer.RoadNet()
      ],
      zoom: 13
    });

    // 多边形
    var path = [
      [116.384422, 39.920255],
      [116.410703, 39.897555],
      [116.402292, 39.892353],
      [116.389846, 39.891365]
    ]
    var polygon = new AMap.Polygon({
      path: path,
      strokeColor: "#FF33FF",
      strokeWeight: 6,
      strokeOpacity: 0.2,
      fillOpacity: 0.4,
      fillColor: '#1791fc',
      zIndex: 50,
    })
    map.add(polygon)
    // 缩放地图到合适的视野级别
    map.setFitView([ polygon ])
    // 创建点
    // 以 icon URL 的形式创建一个途经点
    var viaMarker = new AMap.Marker({
      position: new AMap.LngLat(116.38, 39.92),
      // 将一张图片的地址设置为 icon
      icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
      // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
      offset: new AMap.Pixel(-13, -30)
    });
    // 创建一个 Icon
    var startIcon = new AMap.Icon({
      // 图标尺寸
      size: new AMap.Size(25, 34),
      // 图标的取图地址
      image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
      // 图标所用图片大小
      imageSize: new AMap.Size(135, 40),
      // 图标取图偏移量
      imageOffset: new AMap.Pixel(-9, -3)
    });

    // 将 icon 传入 marker
    var startMarker = new AMap.Marker({
      position: new AMap.LngLat(116.35, 39.89),
      icon: startIcon,
      offset: new AMap.Pixel(-13, -30)
    });

    // 将 markers 添加到地图
    map.add([viaMarker, startMarker]);
  }).catch(e => {
    console.log(e);
  })

  export default {
    name: "index",
  }

</script>

<style scoped>
  #container {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
  }
</style>
